vue & typescript

這天小E 提及到幾個問題

Vue 的 Single-File Component 混合HTML / Code 內容放一起的問題.

Vue 的 Single-File Component 檔案結構基本如下

<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Single-File Component 檔案可以把HTML , CSS 以及 JavaScript/Typescript 內容集中在一個檔案,
但也可以把這三種類型內容分開到三個檔案 .vue .css .js 或 .ts

關注點分離, 在該原則下，系統應該按照其業務來將系統本身劃分成不同的部分，從而進一步降低耦合性.

那麼首先，關注點是什麼呢？
比如說這個Single-File Component 裡面最主要有兩種業務區隔，就是基本的Code 實現層(infrastruture) 和UI 展現層(Persistent ).

對Developer 角度來說, 他最常修改最關心的地方就是Javascript/Typescript Code 的部分, 它對Developer 是有用的，我們就稱它為一個關注點.
對UI Designer 來說, 他最常修改關注的點, 則就是UI 展現層的 template 和 css.

對Developer 瀏覽程式碼角度來說, 打開一個Single-File Component 檔案, 開頭映入眼中卻是HTML 內容,
當HTML 內容很大, 就得移動游標到code block 地方. 這實在是不方便.

我的建議是分兩種檔案類型就可以了.
my-component.vue 和 my-component.ts

Developer 人員只需打開 .ts 就可以快速瀏覽修改Code .
Designer 人員也只需要打開 .vue 檔案修改HTML / CSS

當然假如你是"全端"超人(Designer / Javascript / Typescript 樣樣精通, 樣樣常常修改), 那就Single-File 混在一起修改吧.

對我來說, 就算要同時修改HTML / Code , 我也頃向分兩個檔案類型,

偏好Javascript 開發, 寫 any 就很爽 !?

為什麼我們要在 Vue 專案中使用 TypeScript，有幾個點是我認為的好處:

• 型別推導
• 型別就是註解，易於維護除錯
• 提供 enum 與 interface 用來規範 API 回傳格式

好在Vue 2.5 版以後開始在 vue-cli3 新增了 TS 模板，方便了許多.

基本上 Typescript vue component 樣子如下

import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
   @Prop() private msg!: string;
   @Emit('ParentEmit') 
   private changeMsg(s: string) {
     return;
   }
   public mounted() {
   }
}

使用Typescript 之後, 引用第三方js 套件, 使用上不方便 ??

常常引用第三方js 套件, 卻沒提供Typescript declaration 定義檔案, 使用上不方便
相反的, 這有好處,

第一個引用js 套件的developer 就得自行提供Typescript declaration file.
我們有超多 developer , 不是每一個 developer 通通都知道這第三方js 有哪些public method 可以用.
透過 "先鋒developer" 可以讓後面的 developer 快速方便知道public methods

嘗試用了Typescript 之後, 也引用TDD 測試, 但常常會遇到non-public method , 就把它變成public 來測試.

將要測試的私有方法公開為公共方法, 這真的不是一個好主意. 會破壞封裝並將內部實現程式碼向外部用戶公開.

因為單元測試的意義, 在於：「單元測試就是用來模擬外部如何使用測試目標物件, 驗證其行為是否符合預期」

而物件導向的封裝原則用意在於: 隔離出物件的內部與外部, 也就是定義private 與 public methods.

另外我們常常會遇到因為一些需求異動，導致單元測試程式就需要跟著重新調整, 設計或修改, 而且頻率與範圍導致測試的維護成本增加不少.
所以是不希望 developer 去針對非 public method 寫單元測試.

但如果你認為這個private method 真的非常重要又不希望曝露出去,
那就把private 提取出去變成物件, 反之你覺得這不值得提取出去, 那就表明這個private 一點都不重要.

總而言之-最好不要對私有方法進行測試